<template>
  <div id="windowEditorManage">
    <div style="margin-top:20%;text-align: center; user-select: none" v-if="editableTabs.length===0">
      <h1>打开一个页面开始工作</h1>
    </div>
    <el-tabs
        v-if="editableTabs.length!==0"
        v-model="editableTabsValue"
        type="card"
        class="demo-tabs"
        closable
        @tab-remove="removeTab"
    >
      <el-tab-pane
          v-for="item in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
      >
        <template #label>
          <span class="custom-tabs-label" @contextmenu.prevent="fileTreeClickRight($event,item.name)">
            <el-popover placement="bottom" trigger="hover" :content="item.info" :show-after="800">
              <template #reference>
                <span>{{ item.title }}</span>
              </template>
            </el-popover>
          </span>
        </template>
        <div id="window_tab_content" :style="'height:' + (height - 42) + 'px' ">
          <div v-if="item.type==='file_edit'">
            <windowEditorComponent ref="ref_windowEditorComponent" :sessionToken="sessionToken" :height="height - 42"
                                   :editFileUrl="item.file_url"
                                   :curr_editableTabsValue="item.name"></windowEditorComponent>
          </div>
          <div v-if="item.type==='file_diff'">
            <windowDiffShowComponent ref="windowDiffShowComponent" :sessionToken="sessionToken" :height="height - 42"
                                     :old_path_url="item.file_url_old" :new_path_url="item.file_url_new"
                                     :curr_editableTabsValue="item.name"></windowDiffShowComponent>
          </div>
          <div id="window_tab_content_control" v-if="item.type==='control'">
            <windowFunctionChoice :session-token="sessionToken"></windowFunctionChoice>
          </div>
          <div id="window_tab_content_gitee_issue" v-if="item.type==='gitee_issue'">
            <windowIssueComponent :session-token="sessionToken" :code-name="item.codeName" :height="height - 42"
                                  :access-token="item.accessToken"></windowIssueComponent>
          </div>
          <div id="window_tab_content_package_spec" v-if="item.type==='package_spec'">
            <windowPackageManage4Spec :session-token="sessionToken" :dir_path="item.dir_path" :height="height - 42"
                                      :dir_name="item.dir_name"></windowPackageManage4Spec>
          </div>
          <div id="window_tab_content_compatibility_reports" v-if="item.type==='compatibility_reports'">
            <windowCompatibilityReportsManage :session-token="sessionToken"
                                              :height="height - 42"></windowCompatibilityReportsManage>
          </div>
          <div id="window_tab_content_issue_parse" v-if="item.type==='issue_parse'">
            <windowIssueParseManage :session-token="sessionToken" :height="height - 42"></windowIssueParseManage>
          </div>
          <div id="window_tab_content_easy_work" v-if="item.type==='easy_work'">
            <windowEasyManage :session-token="sessionToken" :height="height - 42"></windowEasyManage>
          </div>
          <div id="window_tab_content_shell_page" v-if="item.type==='shell'">
            <windowShellComponent :height="height - 42"></windowShellComponent>
          </div>
          <div id="window_tab_code_mirror_page" v-if="item.type==='code_mirror'">
            <windowCodeMirrorComponent :editFileStr="item.file_str" :height="height - 42"></windowCodeMirrorComponent>
          </div>
          <div id="window_tab_setting_page" v-if="item.type==='setting'">
            <windowSettingManage :session-token="sessionToken"></windowSettingManage>
          </div>
          <div id="window_tab_content_koji_rpm_parse" v-if="item.type==='koji_rpm_parse'">
            <windowRpmKojiParseManage :session-token="sessionToken" :height="height - 42"></windowRpmKojiParseManage>
          </div>
          <div id="window_tab_content_koji_rpm_parse" v-if="item.type==='single_package_source_parse'">
            <windowSinglePackageSourceParseManage :session-token="sessionToken" :height="height - 42"></windowSinglePackageSourceParseManage>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div id="menuRight4windowEditorManageTab" v-show="menuRightVisible">
      <div class="menuRightChoice">
        <span class="menuRightChoice_icon"><el-icon><Close/></el-icon></span>关闭此标签页
      </div>
      <div class="menuRightChoice">
        <span class="menuRightChoice_icon"></span>关闭其它标签页
      </div>
    </div>
  </div>

</template>

<script>
// import Vue from 'vue'
import windowEditorComponent from "@/components/windowEditorComponent";
import windowDiffShowComponent from "@/components/windowDiffShowComponent";
import windowFunctionChoice from "@/components/windowFunctionChoice";
import windowIssueComponent from "@/components/windowIssueComponent";
import windowPackageManage4Spec from "@/components/windowPackageManage4Spec";
import windowCompatibilityReportsManage from "@/components/windowCompatibilityReportsManage";
import windowIssueParseManage from "@/components/windowIssueParseManage";
import windowEasyManage from "@/components/windowEasyManage";
import windowShellComponent from "@/components/windowShellComponent";
import windowCodeMirrorComponent from "@/components/windowCodeMirrorComponent";
import windowSettingManage from "@/components/windowSettingManage";
import windowRpmKojiParseManage from "@/components/windowRpmKojiParseManage";
import windowSinglePackageSourceParseManage from "@/components/windowSinglePackageSourceParseManage";
// import axios from 'axios'
// import {ElNotification} from 'element-plus'
import {Close} from '@element-plus/icons-vue'

export default {
  name: "windowEditorManage",
  props: {
    sessionToken: String,
    width: Number,
    height: Number,
  },
  components: {
    windowEditorComponent,
    windowDiffShowComponent,
    windowFunctionChoice,
    windowIssueComponent,
    windowPackageManage4Spec,
    windowCompatibilityReportsManage,
    windowIssueParseManage,
    windowEasyManage,
    windowShellComponent,
    windowCodeMirrorComponent,
    windowSettingManage,
    windowRpmKojiParseManage,
    windowSinglePackageSourceParseManage,
    Close,
  },
  data() {
    return {
      editableTabs: [],
      tabIndex: 0,
      editableTabsValue: '0',
      menuRightVisible: false,
      menuRightClickTabName: ""
    }
  },
  methods: {
    fileTreeClickRight(MouseEvent, tabName) {
      this.menuRightVisible = true;
      this.menuRightClickTabName = tabName;
      let menu = document.querySelector("#menuRight4windowEditorManageTab");
      menu.style.cssText = "left: " + (MouseEvent.clientX - 3) + 'px' + "; top: " + (MouseEvent.clientY - 3) + 'px;';
    },
    addTab_editor_file_out(title, file_url) {
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].file_url === file_url) {
          this.editableTabsValue = this.editableTabs[i].name
          return
        }
      }
      const newTabName = `${++this.tabIndex}`
      this.editableTabs.push({
        title: title,
        name: newTabName,
        content: 'New Tab content',
        type: 'file_edit',
        file_url: file_url,
        info: file_url
      })
      this.editableTabsValue = newTabName
    },
    addTab_diff_show_out(title, file_url_old, file_url_new) {
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].file_url_old === file_url_old && this.editableTabs[i].file_url_new === file_url_new) {
          this.editableTabsValue = this.editableTabs[i].name
          return
        }
      }
      const newTabName = `${++this.tabIndex}`
      this.editableTabs.push({
        title: "文件对比",
        name: newTabName,
        content: 'New Tab content',
        type: 'file_diff',
        file_url_old: file_url_old,
        file_url_new: file_url_new,
        info: "对比文件不同"
      })
      this.editableTabsValue = newTabName
    },
    addTab_control_page_out() {
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].type === 'control') {
          this.editableTabsValue = this.editableTabs[i].name
          return
        }
      }
      const newTabName = `${++this.tabIndex}`
      this.editableTabs.push({
        title: "控制页面",
        name: newTabName,
        content: 'New Tab content',
        type: 'control',
        info: "进行基础操作"
      })
      this.editableTabsValue = newTabName
    },
    addTab_gitee_issue_page_out(codeName, accessToken) {
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].codeName === codeName) {
          this.editableTabsValue = this.editableTabs[i].name
          return
        }
      }
      const newTabName = `${++this.tabIndex}`
      this.editableTabs.push({
        title: "Issue:" + codeName,
        name: newTabName,
        content: 'New Tab content',
        type: 'gitee_issue',
        codeName: codeName,
        accessToken: accessToken,
        info: "查询Issue"
      })
      this.editableTabsValue = newTabName
    },
    addTab_package_spec_page_out(dir_path, dir_name) {
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].type === "package_spec" && this.editableTabs[i].dir_name === dir_name) {
          this.editableTabsValue = this.editableTabs[i].name
          return
        }
      }
      const newTabName = `${++this.tabIndex}`
      this.editableTabs.push({
        title: "打包：" + dir_name,
        name: newTabName,
        content: 'New Tab content',
        type: 'package_spec',
        dir_name: dir_name,
        dir_path: dir_path,
        info: "进行SPEC目录打包"
      })
      this.editableTabsValue = newTabName
    },
    addTab_compatibility_reports_page_out() {
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].type === 'compatibility_reports') {
          this.editableTabsValue = this.editableTabs[i].name
          return
        }
      }
      const newTabName = `${++this.tabIndex}`
      this.editableTabs.push({
        title: "兼容性报告",
        name: newTabName,
        content: 'New Tab content',
        type: 'compatibility_reports',
        info: "生成兼容性测试报告"
      })
      this.editableTabsValue = newTabName
    },
    addTab_issue_parse_page_out() {
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].type === 'issue_parse') {
          this.editableTabsValue = this.editableTabs[i].name
          return
        }
      }
      const newTabName = `${++this.tabIndex}`
      this.editableTabs.push({
        title: "Issue分析",
        name: newTabName,
        content: 'New Tab content',
        type: 'issue_parse',
        info: "Issue分析"
      })
      this.editableTabsValue = newTabName
    },
    addTab_koji_rpm_parse_page_out(rpm_name) {
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].type === 'koji_rpm_parse' + rpm_name) {
          this.editableTabsValue = this.editableTabs[i].name
          return
        }
      }
      const newTabName = `${++this.tabIndex}`
      this.editableTabs.push({
        title: "软件包分析" + rpm_name,
        name: newTabName,
        content: 'New Tab content',
        type: 'koji_rpm_parse' + rpm_name,
        rpm_name: rpm_name,
        info: "Koji包版本分析"
      })
      this.editableTabsValue = newTabName
    },
    addTab_single_package_source_parse_page_out() {
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].type === 'single_package_source_parse') {
          this.editableTabsValue = this.editableTabs[i].name
          return
        }
      }
      const newTabName = `${++this.tabIndex}`
      this.editableTabs.push({
        title: "单包源分析",
        name: newTabName,
        content: 'New Tab content',
        type: 'single_package_source_parse',
        info: "查看指定日期单包源的软件包"
      })
      this.editableTabsValue = newTabName
    },
    addTab_easy_work_page_out() {
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].type === 'easy_work') {
          this.editableTabsValue = this.editableTabs[i].name
          return
        }
      }
      const newTabName = `${++this.tabIndex}`
      this.editableTabs.push({
        title: "快捷操作",
        name: newTabName,
        content: 'New Tab content',
        type: 'easy_work',
        info: "快捷操作"
      })
      this.editableTabsValue = newTabName
    },
    addTab_shell_page_out() {
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].type === 'shell') {
          this.editableTabsValue = this.editableTabs[i].name
          return
        }
      }
      const newTabName = `${++this.tabIndex}`
      this.editableTabs.push({
        title: "Shell",
        name: newTabName,
        content: 'New Tab content',
        type: 'shell',
        info: "命令行"
      })
      this.editableTabsValue = newTabName
    },
    addTab_code_mirror_page_out(file_str, title) {
      const newTabName = `${++this.tabIndex}`
      this.editableTabs.push({
        title: title,
        name: newTabName,
        content: 'New Tab content',
        type: 'code_mirror',
        file_str: file_str,
        info: "查看文本"
      })
      this.editableTabsValue = newTabName
    },
    addTab_setting_page_out() {
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].type === 'setting') {
          this.editableTabsValue = this.editableTabs[i].name
          return
        }
      }
      const newTabName = `${++this.tabIndex}`
      this.editableTabs.push({
        title: "设置",
        name: newTabName,
        content: 'New Tab content',
        type: 'setting',
        info: "设置界面"
      })
      this.editableTabsValue = newTabName
    },
    removeTab(targetName) {
      const tabs = this.editableTabs
      let activeName = this.editableTabsValue
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            }
          }
        })
      }
      this.editableTabsValue = activeName
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName)
    },
    changeStatus4windowFileManage() {
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].name === this.editableTabsValue) {
          if (this.editableTabs[i].file_url) {
            this.$store.state.obj_windowFileManage.fileTreeNodeActivate(this.editableTabs[i].file_url)
          }
          return
        }
      }
    },
  },
  watch: {
    editableTabsValue: function (newValue) {
      this.$store.state.curr_editor_file_path = newValue
      this.changeStatus4windowFileManage()
    }
  },
  mounted() {
    // this.addTab_control_page_out()
    // this.addTab_compatibility_reports_page_out()
    // this.addTab_diff_show_out("", "", "")
    // this.addTab_issue_parse_page_out()
    // this.addTab_shell_page_out()
    let obj_this = this
    document.addEventListener('click', function () {
      obj_this.menuRightVisible = false
    })
  }
}
</script>

<style>
.el-tabs__content {
  margin-top: -14px;
}

#window_tab_content {
  overflow: auto;
}

#window_tab_content_control {
  width: 98%;
  margin-left: 10px;
  margin-top: 10px;
}

#window_tab_content_gitee_issue {
  width: 98%;
  margin-left: 10px;
  margin-top: 10px;
}

#menuRight4windowEditorManageTab {
  z-index: 999;
  width: 150px;
  position: fixed;
  padding-top: 3px;
  padding-bottom: 3px;
  border-radius: 3px;
  border: 2px solid rgba(128, 128, 128, 0.42);
  background-color: #f6f6f6;
}

.menuRightChoice {
  cursor: pointer;
  padding-left: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  transition: 0.5s;
}

.menuRightChoice:hover {
  background-color: #83c3f8;
}

.menuRightChoice_icon {
  display: inline-block;
  width: 20px;
}

.windowEditorTab {
  padding: 10px;
}
</style>